<?php
    echo doctype();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        <?php
            echo $this->lang->line('manager_title_display');
        ?>
    </title>
    <style type="text/css">
    * {
            margin: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: Tahoma, Geneva, sans-serif;
            overflow: hidden;
        }
        div.container {
            width: 100%;
            min-height: 100%;
            height: auto;
            height: 100%;
            margin: 0 auto -50px;
        }
        div.content {
            width: 100%;
            z-index: 20;
        }
        div#ads {
            background: #000;
        }
        div#sidebar {
            position: fixed;
            right: 0;
            top: 0;
            width: 250px;
            height: 100%;
            background-image: url(<?php echo base_url(); ?>images/bg-sidebar.png);
            z-index: 50;
            padding-top: 15px;
        }
        div#footer {
            position: fixed;
            bottom: 0;
            width: auto;
            background: url(<?php echo base_url(); ?>images/bg-ticker.png);
            font-size: 1.9em;
            color: #FFFFFF;
            padding: 4px;
            height: 50px;
            z-index: 50;
            white-space: nowrap;
            display: table;
        }
        div#ticker {
            display: table-cell;
            vertical-align: middle;
        }
        div#ticker ul li {
            font-size: 0px;
            padding-right: 100px;
        }
        div.queue {

            width: 200px;
            height: 100px;
            margin: 0 auto 15px auto;
            padding: 10px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            background: url(<?php echo base_url(); ?>images/bg-queue.png);
            -moz-box-shadow: 3px 3px 4px #666;
            -webkit-box-shadow: 3px 3px 4px #666;
            box-shadow: 3px 3px 4px #666;
        }
        div.numb{
            font-size: 40px;
        }
        div.coun{
            color: #ccc;
            font-size: 30px;
        }
        div.queue div.num {
            font-size: 4em;
        }
        div.push {
            clear: both;
            height: 50px;
        }
        div#ticker ul li {
            width: 100%;
        }
        div#auth {
            display: none;
            font-size: 0.7em;
        }
        button {
            vertical-align: middle;
            cursor: pointer;
        }
        object, embed {
            margin: 0px;
            padding: 0px;
        }
        img {
            vertical-align: bottom;
        }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
        #ie-cell {
            position: relative;
            float: left;
            top: 50%
        }
    </style>
    <![endif]-->
    <script type="text/javascript" src="<?php echo site_url('js/jquery-1.4.4.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo site_url('js/jquery-ui-1.8.7.custom.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo site_url('js/jcarousellite_1.0.1.min.js');?>"></script>
    <script type="text/javascript" src="<?php echo site_url('js/jquery.easing.1.1.js');?>"></script>
    <script type="text/javascript" src="<?php echo site_url('js/jquery.pngFix.js');?>"></script>
    <script type="text/javascript">
        base_url = '<?php echo base_url(); ?>';
        a = '';
        $(document).ready(
            function()
            {
                function getQueueNumber()
                {
                    $.post(base_url + "ajax/get_latest_numbers",
                        function(data)
                        {
                            for(i = 0; i < data.queue_number.length; i++)
                            {
                                $(".sn" + i).html(data.queue_number[i]);
                                $(".sc" + i).html(data.counter[i]);
                            }
                        }, "json"
                    );
                }
                setInterval(getQueueNumber, 1000);
                $(document).pngFix();
                $("#auth").dialog({ autoOpen: false, resizable: false, height: 90, modal: true });
                queues = $("#services").html();
                $(window).resize(
                    function()
                    {
                        $("#sidebar").css('height', $(window).height() - $("#footer").height() - 23);
                        visible = Math.round($("#sidebar").height() / ($("div.queue").height() + parseInt($("div.queue").css("marginBottom").replace("px", "")) + (parseInt($("div.queue").css("paddingTop").replace("px", "")) * 2)));
                        $("#services").html(queues);
                        $("#ads").css('width', $(window).width() - $("#sidebar").width());
                        $("#ads").css('height', $(window).height() - $("#footer").height());
                        if(<?php echo count($services); ?> > visible)
                        {
                            circular = true;
                        }
                        else
                        {
                            circular = false;
                        }

                        $("#services").jCarouselLite({ visible: visible, auto: 1, speed: 4000, circular: circular, vertical: true });
                    }
                );
                $(".container, #footer").click(
                    function()
                    {
                        $("#auth").dialog('open');
                    }
                );
                $("#ticker").jCarouselLite({ visible: 1, auto: 1, speed: 7000, circular: true });
                $(window).resize();
                $("#player").width('100%');
            }
        );
    </script>
</head>
<body>
    <div class="container">
        <div class="content">
            <div id="ads">
                <script type="text/javascript" src="<?php echo base_url(); ?>player/swfobject.js"></script>
                <div id="flashcontent"></div>
                <script type="text/javascript">
                    var so = new SWFObject('<?php echo base_url(); ?>player/mwplayer.swf','player', $(window).width() - $("#sidebar").width() , $(window).height() - $("#footer").height() ,'9','#000000');
                    so.addParam('wmode','opaque');
                    so.addParam('quality','high');
                    so.addParam('allowfullscreen','true');
                    so.addParam('allowscriptaccess','always');
                    so.write("flashcontent");
                </script>
            </div>
            <div id="sidebar">
                <div id="services">
                    <ul>
                        <?php
                            for($i = 0; $i < count($services); $i++) {
                        ?>
                        <li>
                            <div class="queue">
                                <?php
                                    echo $services[$i]['title'];
                                ?>
                                <div class="numb">
                                    <div class="<?php echo 'sn' . $i; ?>">N/A</div>
                                </div>
                                <div class="coun">
                                    <div class="<?php echo 'sc' . $i; ?>">...</div>
                                </div>
                            </div>
                        </li>
                        <?php
                            }
                        ?>
                    </ul>
                </div>
            </div>
        </div>
        <div class="push"></div>
    </div>
    <div id="footer">
        <div id="ticker">
              <div class="ie-cell">
                    <ul>
                          <li>Ticker</li>
                    </ul>
              </div>
        </div>
    </div>
</body>
</html>